{% extends "base.html" %}

{% block title %}照护计划总表 - 长者照护计划系统{% endblock %}

{% block page_title %}照护计划总表{% endblock %}

{% block extra_css %}
<style>
    .filter-section {
        margin-bottom: 20px;
        padding: 15px;
        border: 1px solid var(--tech-border);
        border-radius: 5px;
        background-color: rgba(1, 1, 43, 0.75);
    }
    
    .filter-input-groups {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .filter-group {
        flex: 1;
        min-width: 200px;
    }
    
    .card-btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
    
    #resultsTable {
        color: #fff;
        border: 1px solid var(--tech-border);
    }
    
    #resultsTable th, #resultsTable td {
        border: 1px solid var(--tech-border);
        padding: 8px;
        vertical-align: middle;
    }
    
    #resultsTable th {
        background-color: rgba(5, 238, 255, 0.1);
        color: var(--tech-primary);
        font-weight: 500;
    }
    
    #resultsTable tbody tr:nth-child(odd) {
        background-color: rgba(1, 1, 43, 0.6);
    }
    
    #resultsTable tbody tr:hover {
        background-color: rgba(5, 238, 255, 0.1);
    }
    
    .badge {
        padding: 5px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
    }
    
    .badge-primary {
        background-color: rgba(0, 123, 255, 0.7);
        color: white;
    }
    
    .modal-content {
        background-color: rgba(1, 1, 43, 0.95);
        border: 1px solid var(--tech-border);
        color: #fff;
    }
    
    .modal-header {
        border-bottom: 1px solid var(--tech-border);
    }
    
    .modal-footer {
        border-top: 1px solid var(--tech-border);
    }
    
    .schedule-item {
        padding: 8px;
        margin-bottom: 5px;
        border-radius: 3px;
        border-left: 4px solid var(--tech-primary);
        background-color: rgba(5, 238, 255, 0.1);
    }
    
    .form-control, .form-select {
        background-color: rgba(1, 1, 43, 0.7);
        border: 1px solid var(--tech-border);
        color: #fff;
    }
    
    .form-control:focus, .form-select:focus {
        background-color: rgba(1, 1, 43, 0.9);
        border-color: var(--tech-primary);
        color: #fff;
        box-shadow: 0 0 10px rgba(5, 238, 255, 0.5);
    }
    
    .form-label {
        color: var(--tech-primary);
        font-weight: 500;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="tech-card">
            <div class="tech-card-header">
                <h5 class="card-title"><i class="fas fa-calendar-alt me-2"></i>照护计划总表</h5>
            </div>
            <div class="tech-card-body">
                <div class="filter-section">
                    <h6 class="mb-3 text-light"><i class="fas fa-filter me-2"></i>查询筛选</h6>
                    <div class="filter-input-groups">
                        <div class="filter-group">
                            <label for="elderFilter" class="form-label">老人ID</label>
                            <input type="text" class="form-control" id="elderFilter" placeholder="输入老人ID">
                        </div>
                        <div class="filter-group">
                            <label for="dateFilter" class="form-label">日期</label>
                            <input type="date" class="form-control" id="dateFilter" value="{{ date.today().isoformat() }}">
                        </div>
                        <div class="filter-group">
                            <label for="batchFilter" class="form-label">批次号</label>
                            <input type="text" class="form-control" id="batchFilter" placeholder="输入批次号">
                        </div>
                        <div class="filter-group d-flex align-items-end">
                            <button id="filterButton" class="btn tech-btn tech-btn-primary w-100">
                                <i class="fas fa-search me-2"></i>查询
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table" id="resultsTable">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>老人ID</th>
                                <th>日期</th>
                                <th>时间段数</th>
                                <th>批次号</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for result in results %}
                            <tr>
                                <td>{{ result.id }}</td>
                                <td>{{ result.elder_id }}</td>
                                <td>{{ result.date }}</td>
                                <td>{{ result.slots_count|default(0) }}</td>
                                <td>{{ result.batch_number if result.batch_number else '无' }}</td>
                                <td>{{ result.created_at }}</td>
                                <td>
                                    <button class="btn tech-btn tech-btn-sm tech-btn-info view-schedule card-btn" data-id="{{ result.id }}" data-elder="{{ result.elder_id }}" data-date="{{ result.date }}" data-schedule="{{ result.schedule_data }}">
                                        <i class="fas fa-eye"></i> 查看计划
                                    </button>
                                    <a href="{{ url_for('time_slots_page') }}?elder={{ result.elder_id }}&date={{ result.date }}" class="btn tech-btn tech-btn-sm tech-btn-primary card-btn">
                                        <i class="fas fa-list"></i> 查看明细
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div>
                        <span class="text-light">显示 <span id="visibleCount">{{ results|length }}</span> 条记录，共 <span id="totalCount">{{ results|length }}</span> 条记录</span>
                    </div>
                    <div>
                        <button id="exportButton" class="btn tech-btn tech-btn-success">
                            <i class="fas fa-file-excel"></i> 导出到Excel
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 查看照护计划模态框 -->
<div class="modal fade" id="scheduleModal" tabindex="-1" aria-labelledby="scheduleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="scheduleModalLabel">照护计划详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <h6 class="text-light">老人ID: <span id="modalElderId"></span></h6>
                    <h6 class="text-light">日期: <span id="modalDate"></span></h6>
                </div>
                <div id="scheduleContainer" class="text-light">
                    <!-- 照护计划内容将在这里动态加载 -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn tech-btn tech-btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    $(document).ready(function() {
        // 筛选功能
        $("#filterButton").click(function() {
            var elderFilter = $("#elderFilter").val().toLowerCase();
            var dateFilter = $("#dateFilter").val();
            var batchFilter = $("#batchFilter").val().toLowerCase();
            
            var visibleCount = 0;
            var totalCount = $("#resultsTable tbody tr").length;
            
            $("#resultsTable tbody tr").each(function() {
                var elder = $(this).find("td:eq(1)").text().toLowerCase();
                var date = $(this).find("td:eq(2)").text();
                var batch = $(this).find("td:eq(4)").text().toLowerCase();
                
                var elderMatch = elder.includes(elderFilter);
                var dateMatch = dateFilter === "" || date === dateFilter;
                var batchMatch = batchFilter === "" || batch.includes(batchFilter);
                
                if (elderMatch && dateMatch && batchMatch) {
                    $(this).show();
                    visibleCount++;
                } else {
                    $(this).hide();
                }
            });
            
            $("#visibleCount").text(visibleCount);
            $("#totalCount").text(totalCount);
        });
        
        // 查看照护计划功能
        $(".view-schedule").click(function() {
            var elderId = $(this).data("elder");
            var date = $(this).data("date");
            var scheduleData = $(this).data("schedule");
            
            $("#modalElderId").text(elderId);
            $("#modalDate").text(date);
            
            var scheduleHtml = '';
            
            if (scheduleData && typeof scheduleData === 'string') {
                try {
                    var scheduleArray = JSON.parse(scheduleData);
                    if (Array.isArray(scheduleArray)) {
                        for (var i = 0; i < scheduleArray.length; i++) {
                            var item = scheduleArray[i];
                            scheduleHtml += '<div class="schedule-item">';
                            scheduleHtml += '<div><strong>时间段:</strong> ' + item.TimeSlot + '</div>';
                            scheduleHtml += '<div><strong>活动:</strong> ' + item.Activity + '</div>';
                            scheduleHtml += '<div><strong>护理员:</strong> ' + (item.Caregiver !== 'None' ? item.Caregiver : '无') + '</div>';
                            scheduleHtml += '</div>';
                        }
                    } else {
                        scheduleHtml = '<div class="alert alert-warning">照护计划数据格式不正确</div>';
                    }
                } catch (e) {
                    scheduleHtml = '<div class="alert alert-warning">照护计划数据解析失败</div>';
                }
            } else {
                scheduleHtml = '<div class="alert alert-warning">没有照护计划数据</div>';
            }
            
            $("#scheduleContainer").html(scheduleHtml);
            $("#scheduleModal").modal("show");
        });
        
        // 导出到Excel功能
        $("#exportButton").click(function() {
            // 创建一个工作表
            var csv = [];
            // 获取表头
            var headerRow = [];
            $("#resultsTable thead th").each(function() {
                headerRow.push($(this).text());
            });
            csv.push(headerRow.join(","));
            
            // 获取可见行的数据
            $("#resultsTable tbody tr:visible").each(function() {
                var row = [];
                $(this).find("td").each(function(index) {
                    if (index < headerRow.length - 1) { // 排除操作列
                        row.push($(this).text().trim());
                    }
                });
                csv.push(row.join(","));
            });
            
            // 下载CSV文件
            var csvContent = csv.join("\n");
            var blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
            var link = document.createElement("a");
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", "照护计划总表_" + new Date().toISOString().slice(0, 10) + ".csv");
            link.style.visibility = "hidden";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
    });
</script>
{% endblock %}
